<template>
  <div class="week">
    <div class="week-desc">
      
      <div class="week-desc-content">
        
      ///////<span>社团活动</span>///////
      <p>校级活动等你参加</p>
      </div>
    </div>
    <div class="week-swiper">

      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item of weekendSwiperList" :key="item.id">
          <div class="weekSwiper-item">
            <div class="weekSwiper-item-img">
              <img :src="item.imgUrl">
            </div>
            <div class="weekSwiper-item-desc">
                {{item.desc}}
                <p>{{item.detail}}</p>
            </div>

          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeWeekend',
  props:{
    weekendSwiperList:Array
  },
  data(){
    return{

      swiperOptions:{
        freeMode:true,
        spaceBetween:20, //每一个元素之间间隔位置
        slidesPerView:3  //一个页面放下几个元素
      }
    } 
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .week
    border-top:.2rem solid #eee
    overflow:hidden
    height:0
    padding-bottom:58%
    .week-desc
      position:relative
      overflow:hidden
      height:0
      padding-bottom:15%
      .week-desc-content
        text-align:center
        color:#aaa
        position:absolute
        top:50%
        left:50%
        transform:translate(-50%,-50%)
      .week-desc-content>span
        display:inline-block
        color:#000
        font-weight:bold
        margin:.15rem .3rem
    .week-swiper
      overflow:hidden
      height:0
      //width:100%
      padding-bottom:85%
      .weekSwiper-item
        overflow:hidden
        height:0
        width:100%
        padding-bottom:120%
        margin-left:.2rem
        border:.02rem solid
        .weekSwiper-item-img
          overflow:hidden
          height:0
          padding-bottom:67.9%
        .weekSwiper-item-img>img
          max-width:100%
        .weekSwiper-item-desc
          padding-top:.2rem
          text-align:center
        .weekSwiper-item-desc>p
          display:inline-block
          margin-top:.1rem
</style>
